import React from 'react'
import { Menu,} from 'antd';
import {
  AppstoreOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from '@ant-design/icons';

import menuList from '../../config/menuConfig'
import './leftnav.less'

const { SubMenu } = Menu;
class Leftnav extends React.Component{
    

    getMenusNodes=(menuList)=>{
        return menuList.map((item)=>{
            if(!item.children){
            return  <Menu.Item key={item.key} icon={item.icon} to={item.key}>{item.title}</Menu.Item>     
            }
            return  <SubMenu key={item.key} icon={item.icon} title={item.title}></SubMenu> 
        })
    }

    render(){
        return (
            <div className="leftnav">
                <Menu
                defaultSelectedKeys={['1']}
                mode="inline"
                theme="dark"
                
                >
                {
                   this.getMenusNodes(menuList)
               } 
                {/* <Menu.Item key="/home" icon={<PieChartOutlined />}>
                    首页
                </Menu.Item>
                
                <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                    <Menu.Item key="7">Option 7</Menu.Item>
                    <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu> */}
                
                </Menu>
          
            </div>
        )
    }

}

export default Leftnav